<!-- 家政服务报告 -->
<template>
	<view class="card p-30 d-flex">
		<text class="card_title mb-20">家政服务报告</text>
		
		<view class="list d-flex">
			<view :class="['list_item mr-20 d-flex', [4, 5].includes(index) ? '' : 'mb-20']" v-for="(item, index) of list" :key="index">
				<image src="/static/image/housekeeping/active.svg" mode="widthFix" class="list_item_icon mr-10" />
				<text class="list_item_title">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
		import { reactive } from 'vue'
		
		const list = reactive(['不良记录', '职业资格', '法院案件', '执行案件', '限制高消费信息', '网络社交异常检测'])
</script>

<style lang="scss" scoped>
		.card {
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			.list {
				flex-direction: row;
				flex-wrap: wrap;
				
				&_item {
					align-items: center;
					min-width: calc(25% - 50rpx);
					
					&_icon {
						width: 33rpx;
					}
					
					&_title {
						font: {
							size: 24rpx;
						}
					}
				}
			}
		}
</style>
